<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<TITLE>SpringDemo</TITLE>
		<META name="description" content="THORNBIRD.COM" />
		
		<!-- 引入外部js或css -->
		<script th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
		
		<!-- 引入内部js或css -->
		<script th:src="${'/lib/layui/layui.js'}" charset="utf-8"></script>
		<script th:src="${'/js/xadmin.js'}" type="text/javascript"></script>
		<link th:href="${'/css/font.css'}" rel="stylesheet">
		<link th:href="${'/css/xadmin.css'}" rel="stylesheet">
	</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">职工管理</a> <a> <cite>用户管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<form class="layui-form layui-col-md12 x-so" shiro:hasAnyRoles="admin,manager,staff">
				<div class="layui-input-inline">
					<select id="userDepart">
						<option value="">员工所在部门</option>
						<option th:each="department:${departments}"  
							th:value="${department.departName}" th:text="${department.departName}"/>
					</select>
				</div>
				<div class="layui-input-inline">
					<input id="entry" type="text" name="userEntry" placeholder="入职时间"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<select id="birthRange">
						<option value="">员工生日</option>
						<option value="30">最近一个月</option>
						<option value="90">最近三个月</option>
						<option value="180">最近半年</option>
					</select>
				</div>
				<div class="layui-input-inline">
					<input type="text" id="userName" placeholder="员工姓名"
						autocomplete="off" class="layui-input">
				</div>
				<a class="layui-btn" lay-submit="" lay-filter="sreach"><i
					class="layui-icon">&#xe615;</i></a>
			</form>
		</div>
		<xblock>
		<button class="layui-btn" shiro:hasAnyRoles="admin,manager" 
			onclick="x_admin_show('添加用户','/account/addUserPage')">
			<i class="layui-icon"></i>入职添加
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：<a
			id="total">0</a> 条
		</span> </xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th>姓名</th>
					<th>所属部门</th>
					<th>职位</th>
					<th>加入时间</th>
					<th>出生日期</th>
					<th>联系方式</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="users">
				<tr>
					<td colspan=8>加载中<i class="layui-icon">&#xe63e;</i></td>
				</tr>
			</tbody>
		</table>
		<div id="test1" style="text-align: center"></div>
	</div>
</body>
<script type="text/javascript">
	var userDepart=null;
	var EntryStart=null;
	var EntryEnd=null;
	var birthRange=null;
	var userName=null;
	var total=0;
	
	//删除用户
	function deleteUser(userId){
		layer.confirm('你确定要删除吗?', {icon: 3, title:'提示'}, function(index){
			$.ajax({
				type : "POST",
				async:false,
				data : {
					userId:userId
				},
				dataType : "text",
				url : "/account/deleteUser",
				success : function(data) {
					var result = eval("(" + data + ")");
	    			if (result.status == 200) {
						layer.msg("修改成功",{
							icon : 1,
							time: 500,
						},function () {
							//刷新页面
							location.replace(location.href)
						});
					} else {
						layer.msg(result.message, {icon: 0});
					}
				},
				error : function() {
					layer.msg('无法连接服务器', {icon: 2});
				}
			});
		    layer.close(index);
		});
	}
	
	//layui监听器
	layui.use(['form', 'laypage', 'laydate'], function(){
		var form = layui.form,
		layer = layui.layer,
		laypage = layui.laypage,
		laydate = layui.laydate;
	  
		//时间控件
		var start=null;
		var end=null;
		laydate.render({
			elem: '#entry',
			range:true,
			done: function(value, startDate, endDate){
				console.log(value);
				start=startDate.year+"-"+startDate.month+"-"+startDate.date;
				end=endDate.year+"-"+endDate.month+"-"+endDate.date;
				console.log(start);
				console.log(end);
			}
		});
	
		//验证器
		form.verify({
			title: function(value){
				if(value.length < 2){
					return '标题至少得2个字符啊';
				}
			},
			pass: [/(.+){6,12}$/, '密码必须6到12位'],
			content: function(value){
				layedit.sync(editIndex);
			}
		});
		
		//search按钮事件
		form.on('submit(sreach)', function(data){
			console.log(data);
			userDepart=$("#userDepart").val();
			birthRange=$("#birthRange").val();
			userName=$("#userName").val();
			EntryStart=start;
			EntryEnd=end;
			showPage(-1);
			laypage.render({
				elem: 'test1',
				count: total,
				limit:4,
				jump: function(obj, first){
					console.log(obj.curr);
					console.log(obj.limit);
					if(!first){
						showPage(obj.curr);
					}
				}
			});
			return false;
	    });
	  
		// form提交
		form.on('submit(demo1)', function(data){
			layer.alert(JSON.stringify(data.field), {
				title: '最终的提交信息'
			})
			return false;
		});
		
		// 加载分页数据
		function showPage(n) {
			$.ajax({
				type : "POST",
				async:false,
				data : {
					userDepart:userDepart,
					EntryStart:EntryStart,
					EntryEnd:EntryEnd,
					birthRange:birthRange,
					userName:userName,
					currentPage:n
				},
				dataType : "text",
				url : "/account/users",
				success : function(result) {
					console.log(result);
					var tl = eval("(" + result + ")");
					if(n==-1){
						total=tl.total;
						$("#total").text(total);
					}
					$("#users").html("");
					if(tl.list.length>0){
						$.each(tl.list, function(n,val){
							console.log(n);
							var str="";
						    str+="<tr>";
						    str+="<td>"+getDefaultString(val.userName)+"</td>"
						    str+="<td>"+getDefaultString(val.userDepartement)+"</td>"
						    str+="<td>"+getDefaultString(val.userPosition)+"</td>"
						    str+="<td>"+new Date(val.userEntrytime).format("yyyy-MM-dd")+"</td>"
						    str+="<td>"+new Date(val.userBirthday).format("yyyy-MM-dd")+"</td>"
						    str+="<td>"+getDefaultString(val.userTelephone)+"</td>"
						    str+="<td>"+getDefaultString(val.userEmail)+"</td>"
						    str+="<td><a class=\"layui-btn  layui-btn-mini\" onclick=\"x_admin_show('修改','/account/editUserPage?userId="+val.userId+"')\" ><i class=\"layui-icon\">&#xe642;</i>编辑</a><button onclick=\"deleteUser('"+val.userId+"')\" class=\"layui-btn  layui-btn-mini layui-btn-danger\"><i class=\"layui-icon\">&#xe640;</i>删除</button></td>"
						    str+="</tr>";
							$("#users").append(str);
						})
					}else{
						$("#users").append("<tr><td colspan=8 align=\"center\">暂时没有数据哦，快去添加一条吧</td></tr>");
					}
					
				},
				error : function() {
					layer.msg('无法连接服务器', {icon: 2});
				}
			});
		}
		
		// 调用分页数据并展示页码
		showPage(-1);
		laypage.render({
			elem: 'test1',
			count: total,
			limit:5,
			jump: function(obj, first){
				console.log(obj.curr);
				console.log(obj.limit);
		    
				if(!first){
					showPage(obj.curr);
				}
			}
		});
	});
</script>
</html>